<template>
  <div class="app-contain">
    <AppHeader />
    <aside :class="{ hide: !asideVisible }">
      <div
        class="switch"
        :title="asideVisible ? '隐藏' : '展开'"
        @click="asideVisible = !asideVisible"
      ></div>
      <b v-show="asideVisible" class="animate__jello">{{ sys.name }}</b>
      <userAsideVue v-show="asideVisible"></userAsideVue>
    </aside>
    <main class="app-contain__main">
      <AppRouter />
    </main>
  </div>
</template>

<script>
import { onMounted, onUnmounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { storeSys } from "@/store/system";
import userAsideVue from "../../layout/userAside.vue";
import AppRouter from '@/layout/AppRouter.vue'
import AppHeader from '@/layout/AppHeader.vue'
export default {
  name: "layout",
  components: {
    userAsideVue,
    AppRouter,
    AppHeader
  },
  setup() {
    const asideVisible = ref(true);
    const sys = storeSys();
    return {
      asideVisible,
      sys,
    };
  },
};
</script>
<style scoped lang="scss">
$slideDruation: 0.625s;
$frameTop: 70px;
.mask {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #fff;
}
.app-contain {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  background: #1e1d2b;
  color: #fff;
  aside {
    display: flex;
    flex-direction: column;
    width: 280px;
    height: calc(100% - $frameTop * 2);
    background: #2f3042;
    border-radius: 24px;
    padding-left: $frameTop;
    box-sizing: border-box;
    animation: slide-in $slideDruation forwards;
    transition: all 0.25s;
    &.hide {
      width: 100px;
    }
    & > b {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      aspect-ratio: 2/1;
      font-size: 30px;
      animation-duration: 1.25s;
      animation-delay: $slideDruation;
    }
    .switch {
      position: absolute;
      top: 0;
      right: 8px;
      bottom: 0;
      margin: auto 0;
      width: 20px;
      height: 100px;
      cursor: pointer;
      &::before {
        @extend .mask;
        right: 0;
        margin: 0 auto;
        width: 5px;
        height: 100%;
        border-radius: 20px;
        opacity: 0.6;
        transition: all 0.25s;
      }
      &:hover::before {
        opacity: 0.8;
      }
    }
    @keyframes slide-in {
      from {
        transform: translateX(-100%);
      }
      to {
        transform: translateX(-$frameTop);
      }
    }
  }
  main {
    margin-top: $frameTop;
    box-sizing: border-box;
    height: calc(100% - $frameTop);
    flex: 1;
    overflow: hidden;
    position: relative;
    opacity: 0;
    animation: fade-in 1s $slideDruation forwards;
    @keyframes fade-in {
      to {
        opacity: 1;
      }
    }
  }
}
.app-aside__main {
  margin-top: $frameTop;
  box-sizing: border-box;
  height: calc(100% - $frameTop);
  flex: 1;
  overflow: hidden;
  position: relative;
  opacity: 0;
  animation: fade-in 1s $slideDruation forwards;
  @keyframes fade-in {
    to {
      opacity: 1;
    }
  }
}
</style>
